<template>
	<view class="" v-if="framerData.home_name" >
		<view class="author-header pd20" style="background: linear-gradient(180deg,#0081ff,#069cff 10%,rgba(255,214,41,.01) 90%);
}">
			<view class="top">
				<image :src="framerData.home_profile"
					style="width: 100rpx;height: 100rpx;background: #ccc;border-radius: 50%;" mode=""></image>
				<view class="">
					<view class="name">
						{{framerData.home_name}}
					</view>
					<view class="num">
						作品：{{worksCount}}
					</view>
				</view>
			</view>
			<view class="centre">
				所有作品图均在下方，请仔细寻找，超清无水印原图下载为原画4k超清，感谢支持
			</view>
			<view class="bottom">
				<view class="left">
					<view class="">
						全部作品({{worksCount}})
					</view>
				</view>
				<view class="right">
					<view class="" @tap="showModal">
						声明
					</view>
				</view>
			</view>
		</view>

		<view class="img-cont-box pd20">
			<scroll-view style="margin-bottom: 30rpx;" scroll-x class="bg-white nav" scroll-with-animation
				:scroll-left="scrollLeft">
				<view class="cu-item tab-item" :class="index==TabCur?'active':''" v-for="(item,index) in imgTypeList"
					:key="index" @tap="tabSelect($event,item,index)" :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>
			<template v-if="currentImgTypeItem.name == '头像' || currentImgTypeItem.name == '表情包' ">
				<worksList :currentImgs="imgsList" :itemStyle="{
				width: '25%',
				height: '150rpx'
			}"></worksList>

			</template>
			<template v-if="currentImgTypeItem.name == '动态壁纸' || currentImgTypeItem.name == '壁纸' ">
				<worksList :currentImgs="imgsList" :itemStyle="{
				'width':'33.33%',
				'height':'350rpx',
			}"></worksList>
			</template>

			<template v-if="currentImgTypeItem.name == '背景图' ">
				<worksList :currentImgs="imgsList" :itemStyle="{
				width:'50%',
				'height':'200rpx',
			}"></worksList>
			</template>

			<dataNo v-if="imgsList.length == 0"></dataNo>

			<view class="" style="text-align: center;margin-top: 30rpx;" v-if="pageIndex != 1">
				{{none}}
			</view>
		</view>



		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar  justify-end">
					<view class="content">声明</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl" style="text-align: left;">
					创作者上传至图易取小程序的素材内容由创作者负责，部分来源于网络，如有侵权，请联系小程序官方进行删除处理！
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" style="color: #fe7065;" @tap="hideModal">我知道了
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import worksList from "@/components/common/works-list.vue"
	import {
		advertisingData11
	} from "@/mixin/advertisingData1.js"
	import {
		mixinAdvertising
	} from "@/mixin/advertising.js"
	export default {
		mixins: [advertisingData11, mixinAdvertising],
		components: {
			worksList
		},
		data() {
			return {
				// 图片列表
				imgsList: [],
				// 当前图片类型数据
				currentImgTypeItem: {},
				// 图片类型列表
				imgTypeList: [],
				// 创作者数据
				framerData: {},
				// 创作者code
				home_code: "",
				currentImgs: {},
				modalName: "",
				TabCur: 0,
				scrollLeft: 0,
				none: "",
				pageIndex: 1,
				worksCount: 0

			}
		},
		onLoad(e) {
			this.home_code = e.framer_id
			this.init()
			this.getCount()
			this.getFramer()
			this.getImgTypeList()
			setTimeout(() => {
				// this.initAd()
			}, 1000)
		},
		onShow() {
		
		},
		onShareAppMessage() {
			return {
				title:"精选壁纸头像免费拿，入驻丰厚奖励",
				path: "/pages/common/author-details?framer_id="+this.home_code+'&framer_name='+this.framerData.home_name
			};
		},
		onReachBottom() {
			// this.adUnitIdbanner = this.advertisingData1(this.advertisingDataType.bannerList)
			if (this.none) {
				return
			}
			++this.pageIndex

			this.getImgsList()
		},
		methods: {
			initAd() {
				var advertising = uni.getStorageSync('advertising')
				var adUnitId = this.advertisingData1(this.advertisingDataType.popUpList)
				// this.adUnitIdbanner = this.advertisingData1(this.advertisingDataType.bannerList)
				if (advertising.advertisingOpen == 1) {
					// 在页面中定义插屏广告
					let interstitialAd = null

					// 在页面onLoad回调事件中创建插屏广告实例
					if (uni.createInterstitialAd) {
						interstitialAd = uni.createInterstitialAd({
							adUnitId: adUnitId
						})
						interstitialAd.onLoad(() => {})
						interstitialAd.onError((err) => {})
						interstitialAd.onClose(() => {})
					}

					// 在适合的场景显示插屏广告
					if (interstitialAd) {
						interstitialAd.show().catch((err) => {
							console.error(err)
						})
					}
				}


			},

			async getCount() {
				var res = await this.$api.getCount({
					dbName: "wx_imgs",
					whereJson: {
						framer_id: this.home_code || '',
					}
				},false)
				this.worksCount = res.num
			},
			// 获取图片类型列表
			async getImgTypeList() {
				var res = await this.$api.getData({
					dbName: "wx_img_type",
					sortRule:[
						{
							"name": "index",
							"type": "asc"
						}
					]
				},false)

				this.imgTypeList = res.rows
				if (this.imgTypeList[0]) {
					this.currentImgTypeItem = this.imgTypeList[this.TabCur]
					this.getImgsList()
				}
			},
			// 获取图片
			async getImgsList() {
				var res = await this.$api.getData({
					dbName: "wx_imgs",
					sortRule: [
						{
							"name": "is_top",
							"type": "desc"
						}
					],
					whereJson: {
						img_type: this.currentImgTypeItem.type,
						framer_id: this.home_code,
						status:1
					},
					pageIndex: this.pageIndex,
					pageSize:this.currentImgTypeItem.type ==1 || this.currentImgTypeItem.type == 4 ? 30 : 10
				},false)
				if (res.rows.length != 0) {
					this.imgsList = [...this.imgsList, ...res.rows]
				} else {
					this.none = '没有数据了'
				}
			},
			// 获取创作者
			async getFramer() {
				var res = await this.$api.getData({
					dbName: "wx_framer",
					whereJson: {
						home_code: this.home_code || ''
					}
				},false)
				if (res.rows[0]) {
					this.framerData = res.rows[0]
					console.log(this.framerData)
				} else {
					uni.showModal({
						title: '提示',
						content: '口令，暂无创作者',
						success: function(res) {
							uni.navigateBack({

							})
						}
					});
				}
			},
			init() {
				if (this.imgTypeList[0]) {
					this.currentImgs = this.imgTypeList[0]

				}
			},
			tabSelect(e, item, index) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.currentImgTypeItem = item
				this.imgsList = []
				this.pageIndex = 1
				this.none = ''
				this.getImgsList()
			},
			showModal(e) {
				this.modalName = "Modal"
			},
			hideModal(e) {
				this.modalName = null
			},
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.img-cont-box {
		margin-top: 30rpx;


		.tab-item {
			font-size: 25rpx;
		}

		.active {
			font-size: 30rpx;
			color: #ff675c;
			border-bottom: 1rpx solid #ff675c;
		}
	}

	.pd20 {
		padding: 0 20rpx;
	}

	.author-header {
		padding-top: 30rpx;

		.bottom {
			margin-top: 35rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left>view,
			.right>view {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 25rpx;
				padding: 10rpx 15rpx;
				background: linear-gradient(to right, #fba397, #ff675c);
				color: #fff;
				border-radius: 50rpx;
			}

			.right>view {
				background: #fff;
				color: #6e5957;
			}
		}

		.centre {
			margin-top: 25rpx;
			font-size: 25rpx;
			color: #6e5957;
		}

		.top {
			display: flex;
			align-items: center;

			image {
				margin-right: 15rpx;
			}

			.name {
				margin-bottom: 10rpx;
				font-size: 26rpx;
				color: #784f55;
			}

			.num {
				font-size: 25rpx;
				color: #806065;
			}
		}
	}
</style>
